<template>
   <div class="personal layout-pd">
      <el-row>
         <el-col :span="24">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
               :size="formSize" status-icon>
               <el-form-item label="消息通知" prop="delivery">
                  <el-switch v-model="ruleForm.isOpenNotification"  active-value ="1" inactive-value="0"   />
               </el-form-item>
               <el-form-item label="名片公开的场景" prop="type">
                  <el-checkbox v-model="ruleForm.isOpenCard" true-label="1"  false-label="0">找资源中公开</el-checkbox>
                  <el-checkbox v-model="ruleForm.isSendCard" true-label="1"  false-label="0" >添加好友、通过好友申请时发送给对方</el-checkbox>
               </el-form-item>
               <el-form-item label="好友通过设置" prop="resource">
                  <el-radio-group v-model="ruleForm.friendAddSetting">
                     <el-radio label="0" >自动通过</el-radio>
                     <el-radio label="1" >验证通过</el-radio>
                  </el-radio-group>
               </el-form-item>
               <el-form-item label="登录状态" prop="resource">
                  <el-radio-group v-model="ruleForm.loginDefaultStatus">
                     <el-radio label="0" >隐身</el-radio>
                     <el-radio label="1" >在线</el-radio>
                  </el-radio-group>
               </el-form-item>
               <el-form-item label="设置自动回复" prop="resource">
                  <el-radio-group v-model="ruleForm.isAutoSend">
                     <el-radio label="1" >回复文案1</el-radio>
                     <el-radio label="2" >回复文案2</el-radio>
                     <el-radio label="3" >自定义回复</el-radio>
                  </el-radio-group>
               </el-form-item>
               <el-form-item >
                  <el-input v-model="ruleForm.sendContent" type="textarea" />
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" @click="saveSumbit(ruleFormRef)">
                     保存
                  </el-button>
               </el-form-item>
            </el-form>
         </el-col>
      </el-row>
   </div>
</template>

<script  lang="ts" name="personal">
import { reactive, computed, onMounted, toRefs } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import { useUserInfo } from '/@/stores/userInfo'
import { storeToRefs } from 'pinia';
import Cookies from 'js-cookie'
import { Session, Local } from '/@/utils/storage'
import { ElMessage } from 'element-plus'
import { useChatApi } from '/@/api/chat'

export default {
   setup(props, context) {
      const chatApi = useChatApi()
      const storeUserInfo = useUserInfo()
      const { userInfos } = storeToRefs(storeUserInfo)
      // 定义变量内容
      const state = reactive({
         uploadUrl: '/api/file/filaAttach/upload',
         headers: {
            '17work': Session.get('token')
         },
         ruleForm: {
            isOpenNotification:"1",
            isOpenCard:"0",
            isSendCard:"0",
            friendAddSetting:"1",
            loginDefaultStatus:"1",
            isAutoSend:"0",
            sendContent:null,
            userId:null
         },
         formSize:'small',
         options:[],
         rules: {
            oldPassword: [
               { required: true, message: '请输入旧密码', trigger: 'blur' },
               { min: 6, max: 18, message: '请输入6-18位数', trigger: 'blur' },
            ],
            newPassword: [
               { required: true, message: '请输入新密码', trigger: 'blur' },
               { min: 6, max: 18, message: '请输入6-18位数', trigger: 'blur' },
            ]
         },
        
      });

      const saveSumbit = async (formEl) => {
         if (!formEl) return
         await formEl.validate((valid) => {
            if (valid) {
               chatApi.updateSetting(state.ruleForm).then(res=>{
                  if(res.code == 0){
                     ElMessage.success("设置成功");
                  }
               })
            }
         })
      };
      const {
         ruleFormRef,
      } = toRefs(props)

      onMounted(() => {
         chatApi.getNowLoginSetting().then(res=>{
            state.ruleForm = res.data
         })

      })
      return {
         ruleFormRef,
         saveSumbit,
         ...toRefs(state),
      }
   }
}

</script>
<style scoped>
.personal{
   padding: 20px 20px 20px 20px;
   background-color: white;
   /* border-radius: 15px;
   border: 1px; */
}
</style>
